<template>
  <el-carousel
    :interval="props.interval"
    :arrow="
      childrenLength > 1 && props.direction == 'horizontal'
        ? isMobile()
          ? 'always'
          : 'hover'
        : 'never'
    "
    ref="carousel"
    class="carousel-box"
    :autoplay="autoplay"
    :direction="props.direction"
    @click="onClickCarousel"
    @change="change"
  >
    <slot />
    <div class="index-c" v-if="childrenLength > 1 && direction !== 'vertical'">
      {{ indexC }} / {{ childrenLength }}
    </div>
  </el-carousel>
</template>
<script setup lang="ts">
import { ref, onMounted, PropType, nextTick } from 'vue'
import { isMobile } from '@/Utils/global'

const autoplay = ref(true)

const timeout = ref(null)
const onClickCarousel = () => {
  autoplay.value = false
  clearTimeout(timeout.value)
  timeout.value = setTimeout(() => {
    autoplay.value = true
  }, 10000)
}

const indexC = ref(1)
const change = (e) => {
  indexC.value = e + 1
}

enum Orientation {
  Horizontal = 'horizontal',
  Vertical = 'vertical',
}

const props = defineProps({
  interval: {
    type: Number,
    default: 5000,
  },
  direction: {
    type: String as PropType<Orientation>,
    default: 'horizontal',
  },
})
const carousel = ref(null)
const childrenLength = ref(0) // 轮播的数量
const mustInit = () => {
  const el = carousel.value?.$el
  if (!el) return
  const hx = el.querySelectorAll('.carousel-hx .el-carousel__item')?.length || 0
  const carouselItem = el.querySelectorAll('.el-carousel__item')?.length || 0
  // 查看这里面有几个元素
  childrenLength.value = carouselItem - hx
  // 如果值小于2,直接隐藏,如果是横着直接隐藏
  if (childrenLength.value < 2 || props.direction == 'horizontal') {
    el.classList.add('hide-indicators')
  } else {
    el.classList.add('show-indicators')
  }

  // 去掉轮播图的手势
  // let startX, endX
  // el.addEventListener(
  //   'touchstart',
  //   (e) => {
  //     startX = e.targetTouches[0].pageX
  //   },
  //   { passive: true }
  // )
  // el.addEventListener(
  //   'touchmove',
  //   (e) => {
  //     endX = e.targetTouches[0].pageX
  //   },
  //   { passive: true }
  // )
  // el.addEventListener(
  //   'touchend',
  //   () => {
  //     if (startX && endX && startX - endX > 50) {
  //       startX = 0
  //       endX = 0
  //       carousel.value.next()
  //     } else if (startX && endX && endX - startX > 50) {
  //       startX = 0
  //       endX = 0
  //       carousel.value.prev()
  //     }
  //   },
  //   { passive: true }
  // )
}

onMounted(() => {
  mustInit()
  // 为了避免出错3秒钟后,再执行一次(就不用在watch里面写了)
  nextTick(() => {
    setTimeout(() => {
      mustInit()
    }, 3000)
  })
})
</script>
<style lang="scss" scoped>
// 左右的箭头
:deep(.el-carousel__arrow) {
  top: auto;
  bottom: 0px;
  background-color: #2b3f7c55;
  border-radius: 0;
  transform: translateY(0%);
}
:deep(.el-carousel__arrow--left) {
  left: 0;
  width: 26px;
  height: 26px;
}
:deep(.el-carousel__arrow--right) {
  right: 0;
  width: 26px;
  height: 26px;
}

// 隐藏指示器
.hide-indicators {
  // 最近的指示器
  :deep(.el-carousel__indicators) {
    visibility: hidden;
  }
}

.show-indicators {
  // 最近的指示器
  :deep(.el-carousel__indicators) {
    visibility: visible;
  }
}
// 指示器
:deep(.el-carousel__indicators) {
  .el-carousel__indicator {
    border-radius: 50%;
    opacity: 0.3;
    // 创建一个小圆点
    &::before {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      background-color: #0fdeff;
    }

    &.is-active {
      opacity: 1;
    }
    .el-carousel__button {
      display: none;
    }
  }
}

.index-c {
  position: absolute;
  bottom: 0px;
  width: 100%;
  color: rgba(15, 223, 255, 0.5);
  font-size: 11px;
  text-align: center;
}

:deep(.el-carousel__container) {
  overflow: hidden;
}
</style>
